<script lang="ts">
  import clsx from "clsx";
  import { videoPlaceholder } from "./theme";
  import type { VideoPlaceholderProps } from "$lib/types";
  import { getTheme } from "$lib/theme/themeUtils";

  let { size = "sm", class: className }: VideoPlaceholderProps = $props();

  const theme = getTheme("videoPlaceholder");

  const base = $derived(videoPlaceholder({ size, class: clsx(theme, className) }));
</script>

<div role="status" class={base}>
  <svg width="48" height="48" class="text-gray-200 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 384 512">
    <path
      d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"
    ></path>
  </svg>
  <span class="sr-only">Loading...</span>
</div>

<!--
@component
[Go to docs](https://flowbite-svelte.com/)
## Type
[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1562)
## Props
@prop size = "sm"
@prop class: className
-->
